<template>
    <div class="l-wf-audit-info">  
        <div class="l-wf-audit-info--item" :key="item.id" v-for="item in data"  >
            <div class="l-wf-audit-info--header">{{$t(item.name)}}</div>
            <div class="l-wf-audit-info--body">
                <div style="position: relative;z-index:2;" >{{item.des}}<l-upload class="ml-8" style="display: inline-block;" v-if="item.file" :value="item.file" ref="upload" showFileList="popover" disabled /></div>
                <div class="l-wf-audit-info--imgdiv" v-if="item.img" >
                    <img class="l-wf-audit-info--img" :src="`${apiUrl}system/annexesfile/${item.img}?token=${token}` ">
                </div>
                
                <div class="l-wf-audit-info--user" >
                    <div class="l-wf-audit-info--name">
                        <span>{{$t("签字")}}:</span>
                        <span>{{item.user}}</span>
                    </div>
                    <div class="l-wf-audit-info--date">
                        <span>{{$t("日期")}}:</span>
                        <span>{{item.time}}</span>
                    </div>
                </div>
                
            </div>  
        </div> 
    </div>
</template>
<script>

export default {
    name:'l-wf-audit-info',
    props:{
        data:{
            type:Array,
            default:()=>[]
        }
    },
    data(){
        return {
        }
    },
    computed:{
    },
    methods:{
    }
}
</script>
<style lang="scss" scoped>
    .l-wf-audit-info{
        position: relative;
        box-sizing: border-box;
        width: 100%;
        &--item{
            position: relative;
            width: 100%;
            border: 1px solid #ccc;
            padding-left: 100px;
            border-top: 0;
            box-sizing: border-box;
            min-height: 88px;
        }

        &--item:first-child {
            border-top: 1px solid #ccc;
        }

        &--header {
            position: absolute;
            box-sizing: border-box;
            top: 0;
            left: 0;
            height: 100%;
            width: 100px;
            border-right: 1px solid #ccc;
            padding: 4px 0 0 4px;
            overflow: hidden;
        }

        &--body {
            position: relative;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            padding: 4px;
        }

        &--imgdiv {
            position: absolute;
            box-sizing: border-box;
            top: 0;
            right: 0;
            width: 80px;
        }
        &--img {
            width: 100%;
        }
        &--user{
            margin-top: 8px;
            position: relative;
            width: 100%;
            height: 42px;
            box-sizing: border-box;
        }

        &--name {
            position: absolute;
            bottom: 24px;
            right: 0;
            width: 180px;
            text-align: left;
            font-size:12px;
        }

        &--date{
            position: absolute;
            right: 0;
            width: 180px;
            text-align: left;
            bottom: 4px;
            font-size:12px;
        }
    }
</style>